<template>
  <div class="carousel-container">
    <!-- 标题 -->
    <div class="title">
      <h2>论文发表</h2>
      <p>PAPERS AND PUBLICATIONS</p>
    </div>

    <!-- 轮播内容 -->
    <div class="carousel-content">
      <div class="carousel-item" @click="goToUrl(item.url)" v-for="(item, index) in currentPageItems" :key="index">
        <img :src="item.image" alt="Paper Image" />
        <div class="paper-info">
          <h3>{{ item.title }}</h3>
          <!-- 恢复日期显示 -->
          <p class="date">{{ item.date }}</p>
        </div>
      </div>
    </div>

    <!-- 指示点 -->
    <div class="dots">
      <span
        v-for="(page, index) in totalPages"
        :key="index"
        class="dot"
        :class="{ active: currentPage === index }"
        @click="currentPage = index"
      ></span>
    </div>
  </div>
</template>

<script>
// 脚本部分保持不变
export default {
  data() {
    return {
      currentPage: 0,
      itemsPerPage: 3,
      items: [
        {
          image: 'https://media.au.tsinghua.edu.cn/__local/9/8C/57/B29BD5212F0D1722C4CED6D9C2B_2680E30E_20BE5.png',
          title: 'An end-to-end framework for real-time violent behavior detection based on 2D CNNs',
          url: 'https://link.springer.com/article/10.1007/s11554-024-01443-7',
          date: '2024'
        },
        {
          image: 'https://media.au.tsinghua.edu.cn/__local/9/8C/57/B29BD5212F0D1722C4CED6D9C2B_2680E30E_20BE5.png',
          title: 'An Adaptive Multi-Scale Network Based on Depth Information for Crowd Counting',
          url: 'https://www.mdpi.com/1424-8220/23/18/7805',
          date: '2023'
        },
        {
          image: 'https://media.au.tsinghua.edu.cn/__local/9/8C/57/B29BD5212F0D1722C4CED6D9C2B_2680E30E_20BE5.png',
          title: 'Cross-Camera Tracking Model and Method Based on Multi-Feature Fusion',
          url: 'https://www.semanticscholar.org/paper/Cross-Camera-Tracking-Model-and-Method-Based-on-Zhang-Wang/1a7fbdb35973f6b51acd3e3689fc765946e1d29d',
          date: '2023'
        },
        {
          image: 'https://media.au.tsinghua.edu.cn/__local/9/8C/57/B29BD5212F0D1722C4CED6D9C2B_2680E30E_20BE5.png',
          title: 'A Multi-Object Tracking Approach Combining Contextual Features and Trajectory Prediction',
          url: 'https://www.mdpi.com/2079-9292/12/23/4720',
          date: '2023'
        },
        {
          image: 'https://media.au.tsinghua.edu.cn/__local/9/8C/57/B29BD5212F0D1722C4CED6D9C2B_2680E30E_20BE5.png',
          title: 'A framework for detecting fighting behavior based on key points of human skeletal posture',
          url: 'https://www.peeref.com/zh/works/83582683',
          date: '2024'
        },
        {
          image: 'https://media.au.tsinghua.edu.cn/__local/9/8C/57/B29BD5212F0D1722C4CED6D9C2B_2680E30E_20BE5.png',
          title: 'RV-YOLO: real-time object detection algorithm for rail transit platform scenarios.',
          url: 'https://link.springer.com/article/10.1007/s11554-025-01718-7',
          date: '2025'
        },
        {
          image: 'https://media.au.tsinghua.edu.cn/__local/9/8C/57/B29BD5212F0D1722C4CED6D9C2B_2680E30E_20BE5.png',
          title: 'A Computer Vision Based Warning and Behavior Analysis System for Large Passenger Flow in Stations',
          url: 'https://ieeexplore.ieee.org/document/10550611',
          date: '2024'
        },
        {
          image: 'https://media.au.tsinghua.edu.cn/__local/9/8C/57/B29BD5212F0D1722C4CED6D9C2B_2680E30E_20BE5.png',
          title: 'RTVD-Net: An real-time violence detection method based on pre-training of human skeleton images',
          url: 'https://dblp.org/rec/conf/icncc/ZhangLZDL23.html',
          date: '2023'
        },
        {
          image: 'https://media.au.tsinghua.edu.cn/__local/9/8C/57/B29BD5212F0D1722C4CED6D9C2B_2680E30E_20BE5.png',
          title: 'NF-Net: Near and Far Network for Crowd Counting',
          url: 'https://ieeexplore.ieee.org/document/10151219',
          date: '2023'
        },

      ]
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.items.length / this.itemsPerPage);
    },
    currentPageItems() {
      const startIndex = this.currentPage * this.itemsPerPage;
      return this.items.slice(startIndex, startIndex + this.itemsPerPage);
    }
  },
  mounted() {
    this.startAutoPlay();
  },
  methods: {
    startAutoPlay() {
      setInterval(() => {
        this.currentPage = (this.currentPage + 1) % this.totalPages;
      }, 3000);
    },
    goToUrl(url) {
      window.open(url, '_blank');
    }
  }
};
</script>

<style scoped>
.carousel-container {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 40px 20px;
  border-radius: 20px;
  text-align: center;
  background-image: url("@/assets/img/background4.jpg");
  background-size: cover;
  background-position: center;
}

.title {
  margin-bottom: 40px;
}

.title h2 {
  font-size: 32px;
  margin: 0;
  color: #fff;
}

.title p {
  color: #fff;
  font-size: 0.875rem;
  margin: 8px 0 0;
}

.carousel-content {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.carousel-item {
  flex: 1;
  min-width: 300px;
  max-width: calc(33.333% - 20px);
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.carousel-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

.paper-info {
  padding: 10px;
  text-align: left;
  max-width: 400px;
  word-wrap: break-word;
  /* 新增：让容器高度固定，或用弹性布局将日期推到底部 */
  display: flex;
  flex-direction: column;
  min-height: 100px; /* 根据卡片内容需求调整，确保标题和日期有足够空间 */
}

.paper-info h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: #333;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, Helvetica, sans-serif;
  /* 新增：让标题占据可用空间，将日期挤到底部 */
  flex: 1;
}

/* 添加日期样式 */
.paper-info .date {
  margin: 0;
  font-size: 0.8rem;
  color: #666;
  font-style: italic;
  padding-top: 5px;
  border-top: 1px solid #f0f0f0;
  /* 保持左对齐，弹性布局已确保其在底部 */
  text-align: left;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ffffff57;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: #fff;
}
</style>